<template>
  <div class="box">
    <div class="loadingio-spinner-gear-wentdg9nb" v-if="isshow">
      <div class="ldio-y799fh9qn8d">
        <div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isshow: Boolean
  }
}
</script>
<style lang="scss" scoped>
html,
body {
  height: 100%;
}
.box{position: absolute;top: 50%;left: 50%;margin-left:-40px;margin-top: -40px}
@keyframes ldio-y799fh9qn8d {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(22.5deg);
  }
  100% {
    transform: rotate(45deg);
  }
}
.ldio-y799fh9qn8d > div {
  transform-origin: 50px 50px;
  animation: ldio-y799fh9qn8d 0.2s infinite linear;
}
.ldio-y799fh9qn8d > div div {
  position: absolute;
  width: 11px;
  height: 76px;
  background: #888888;
  left: 50px;
  top: 50px;
  transform: translate(-50%, -50%);
}
.ldio-y799fh9qn8d > div div:nth-child(1) {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.ldio-y799fh9qn8d > div div:nth-child(6) {
  width: 40px;
  height: 40px;
  background: #f1f2f3;
  border-radius: 50%;
}
.ldio-y799fh9qn8d > div div:nth-child(3) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.ldio-y799fh9qn8d > div div:nth-child(4) {
  transform: translate(-50%, -50%) rotate(90deg);
}
.ldio-y799fh9qn8d > div div:nth-child(5) {
  transform: translate(-50%, -50%) rotate(135deg);
}
.loadingio-spinner-gear-wentdg9nb {
  width: 80px;
  height: 80px;
  display: block;
  overflow: hidden;
  background: #f1f2f3;
  margin: auto;
}
.ldio-y799fh9qn8d {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.51);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-y799fh9qn8d div {
  box-sizing: content-box;
}
/* generated by https://loading.io/ */
</style>
